模板
<template>
  <div class="container">
    <h1 class="title-emb">嵌入文本</h1>
    <div class="input-container">
      <textarea v-model="inputText" @input="checkInputLength" placeholder="请输入内容..." class="input-box"></textarea>
      <div class="char-count">{{ inputText.length }}/10000</div>
      <button @click="submit" class="confirm-button">提交</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      inputText: '',
    };
  },
  methods: {
    checkInputLength() {
      if (this.inputText.length > 10000) {
        this.inputText = this.inputText.slice(0, 10000);
      }
    },
    async submit() {
      try {
        const loading = this.$loading({
          lock: true,
          text: '正在嵌入文本',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const response = await axios.post('http://localhost:8888/api/ollama/embeddings/save', {
          prompt: this.inputText
        });
        loading.close();
        this.$message.success('提交成功');
        this.inputText = '';
      } catch (error) {
        this.$message.error('提交失败');
      }
    }
  }
};
</script>

<style>
.container {
  margin-top: 150px;
}

.title-emb {
  font-size: 24px;
  margin-bottom: 20px;
  color: #dee3ec;
  text-align: center;
}

.input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-box {
  width: 80%;
  height: 200px;
  padding: 10px;
  border: 1px solid #394255;
  border-radius: 8px;
  resize: none;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: rgba(57, 66, 85, 0.2); /* 透明的主题色 */
  color: white; /* 字体颜色为白色 */
}

.char-count {
  position: absolute;
  bottom: 10px;
  right: 150px; /* 调整位置到右下角 */
  color: #ffffff;
  font-size: 14px;
}

.confirm-button {
  padding: 10px 20px;
  background-color: #394255;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.confirm-button:hover {
  background-color: #55607a;
}
</style>
